<template>
  <div>
    <div class="section-header">
      <h3>{{ formatDate(date) }} 时间碎片轴</h3>
      <span class="count-badge">{{ classCount }} 节课</span>
    </div>
    <div class="timeline">
      <div
        v-for="(seg, index) in segments"
        :key="index"
        class="time-segment"
        :class="seg.type"
        :style="{ width: seg.duration * computedPixelPerMinute + '%' }"
      >
        <!-- 开始时间 -->
        <div class="time-label">{{ seg.start }}</div>

        <!-- 提示文字 -->
        <div class="time-text">
          {{ seg.type === 'invalid' ? '占用' : seg.text }}
        </div>

        <!-- tooltip 冒泡 -->
        <div v-if="seg.type === 'invalid'" class="tooltip">
          {{ seg.text }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TimeLine',
  props: {
    segments: {
      type: Array,
      required: false,
      default: () => [
        { start: '0:00', duration: 450, type: 'valid', text: '可分配时间' },
        { start: '7:30', duration: 60, type: 'invalid', text: '张三词汇课' },
        { start: '8:30', duration: 90, type: 'valid', text: '可分配时间' },
        { start: '10:00', duration: 30, type: 'invalid', text: '李四阅读课' },
        { start: '10:30', duration: 30, type: 'invalid', text: '可分配时间' },
        { start: '11:00', duration: 60, type: 'invalid', text: '李四阅读课' },
        { start: '11:00', duration: 60, type: 'invalid', text: '李四阅读课' },
        { start: '12:00', duration: 780, type: 'valid', text: '可分配时间' }
      ]
    },
    date: {
      type: Date,
      required: true,
      default: ''
    }
  },
  computed: {
    totalMinutes() {
      return this.segments.reduce((sum, seg) => sum + seg.duration, 0)
    },
    computedPixelPerMinute() {
      return 100 / (this.totalMinutes + 4 * this.segments.length)
    },
    classCount() {
      return this.segments.filter((seg) => seg.type === 'invalid').length
    }
  },
  methods: {
    // 格式化日期显示
    formatDate(date) {
      const d = date ? new Date(date) : new Date()
      return `${d.getFullYear()}-${(d.getMonth() + 1).toString().padStart(2, '0')}-${d.getDate().toString().padStart(2, '0')}`
    }
  }
}
</script>

<style scoped>
.timeline {
  display: flex;
  align-items: center;
  margin: 30px 0;
  width: 100%;
  position: relative;
}

.time-segment {
  position: relative;
  height: 14px;
  margin-right: 4px;
  border-radius: 7px;
  flex-shrink: 0;
}

.time-segment.valid {
  background-color: #3b82f6;
}

.time-segment.invalid {
  background-color: #9ca3af;
  cursor: pointer;
}

.time-label {
  position: absolute;
  top: -20px;
  left: 0;
  font-size: 12px;
  font-weight: bold;
  color: #222;
  white-space: nowrap;
}

.time-text {
  position: absolute;
  top: 2.2em;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  color: #444;
  white-space: nowrap;
}

/* tooltip 样式 */
.tooltip {
  display: none;
  position: absolute;
  top: -40px; /* 悬浮在时间轴上方 */
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  z-index: 10;
}

.time-segment.invalid:hover .tooltip {
  display: block;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f0f0f0;
}

.section-header h3 {
  margin: 0;
  font-size: 16px;
  color: #333;
  font-weight: 500;
}

.count-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  background-color: #f0f7ff;
  color: #0084ff;
  font-size: 12px;
  font-weight: 500;
}
</style>
